import React, { FC, useEffect, useState, useRef } from 'react'
import { Button, Drawer, message, Modal, Table, Select, Space } from 'antd'
import { EditableProTable, ProColumns } from '@ant-design/pro-table'
import { getMicroList, addMicro, updateMicro, deleteMicro } from '@/services/proMicro'

interface MicroConfigProps {
  onClose:any,
  visible:boolean,
  projectId:string,
}

const MicroConfig: FC<MicroConfigProps> = (props) => {
  const ref = useRef<any>()

  const { onClose, visible, projectId } = props
  const [editableKeys, setEditableRowKeys] = useState<any>([])
  const [microList, setMicroList] = useState<any>([])

  useEffect(() => {
    if (visible) {
      // 获取微服务列表
      getMicroList({ project_id: projectId }).then((res) => {
        if (res.code === 10000) {
          setMicroList(res.data)
        }
      })
    }
  }, [projectId, visible])

  const columns: ProColumns<any>[] = [
    {
      title: '名称',
      dataIndex: 'name',
      hideInSearch: true,
      formItemProps: {
        rules: [
          {
            required: true,
            message: '此项为必填项'
          }
        ]
      }
    },
    {
      title: 'groupId',
      dataIndex: 'group_id',
      hideInSearch: true,
      formItemProps: {
        rules: [
          {
            required: true,
            message: '此项为必填项'
          }
        ]
      }
    },
    {
      title: 'ArtifactId',
      dataIndex: 'artifact_id',
      hideInSearch: true,
      formItemProps: {
        rules: [
          {
            required: true,
            message: '此项为必填项'
          }
        ]
      }
    },
    {
      title: '访问路径',
      dataIndex: 'context_path',
      hideInSearch: true,
      formItemProps: {
        rules: [
          {
            required: true,
            message: '此项为必填项'
          }
        ]
      }
    },
    {
      title: '版本',
      dataIndex: 'version',
      hideInSearch: true,
      formItemProps: {
        rules: [
          {
            required: true,
            message: '此项为必填项'
          }
        ]
      }
    },
    {
      title: '简介',
      dataIndex: 'description',
      hideInSearch: true,
      formItemProps: {
        rules: [
          {
            required: true,
            message: '此项为必填项'
          }
        ]
      }
    },
    {
      title: '类型',
      dataIndex: 'api_project',
      hideInSearch: true,
      valueType: 'select',
      valueEnum: {
        0: { text: '微服务', status: 'Processing' },
        1: { text: 'API', status: 'Success' }
      },
      formItemProps: {
        rules: [
          {
            required: true,
            message: '此项为必填项'
          }
        ]
      },
      renderFormItem: (_, { type, defaultRender, ...rest }, form) => {
        return <Select placeholder="请选择" style={{width:100}} >
          <Select.Option value={0}>微服务</Select.Option>
          <Select.Option value={1}>API</Select.Option>
        </Select>
      }
    },
    {
      title: '操作',
      valueType: 'option',
      width: 150,
      render: (text, record, _, action) => [
        <a
          key="editable"
          onClick={() => {
            action.startEditable?.(record.id)
          }}
        >
          编辑
        </a>
      ]
    }
  ]


  return (
    <>
      <Drawer
        title="微服务管理"
        width={1000}
        onClose={() => onClose(false)}
        visible={visible}
        bodyStyle={{ paddingBottom: 80, backgroundColor: '#f0f2f5' }}
        footer={
          <div
            style={{
              textAlign: 'right'
            }}
          >
            <Button onClick={() => onClose(false)} type="primary">
              关闭
            </Button>
          </div>
        }>
        <EditableProTable
          actionRef={ref}
          rowKey="id"
          columns={columns}
          request={async () => getMicroList({ project_id: projectId }).then((res) => {
            setMicroList(res.data)
            return res
          })}
          value={microList}
          headerTitle="微服务列表"
          search={false}
          options={{ search: false }}
          editable={{
            editableKeys,
            onSave: async (key: any, val: any) => {
              delete val.index
              if (val.id) {
                delete val.create_time
                await updateMicro(val).then((res) => {
                  if (res.code === 10000) {
                    ref.current.reload()
                    message.success('修改成功！')
                  }
                })
              } else {
                val.project_id = projectId
                await addMicro(val).then((res) => {
                  if (res.code === 10000) {
                    ref.current.reload()
                    message.success('添加成功！')
                  }
                })
              }
            },
            onDelete: async (value: any) => deleteMicro({ id: value }).then((res) => {
              if (res.code === 10000) {
                message.success('删除成功！')
                ref.current.reload()
              }
            }),
            onChange: setEditableRowKeys
          }}
        />
      </Drawer>
    </>
  )
}

export default MicroConfig
